@use "sass:color";
@use "element-plus/theme-chalk/src/index" as element;
@use "../variables" as *;

// Element Plus 样式覆盖
:root {
  --el-color-primary: #{$primary-color};
}

// 按钮样式
.el-button {
  &--primary {
    --el-button-bg-color: #{$primary-color};
    --el-button-border-color: #{$primary-color};
    --el-button-hover-bg-color: #{color.adjust($primary-color, $lightness: 10%)};
    --el-button-hover-border-color: #{color.adjust($primary-color, $lightness: 10%)};
    --el-button-active-bg-color: #{color.adjust($primary-color, $lightness: -10%)};
    --el-button-active-border-color: #{color.adjust($primary-color, $lightness: -10%)};
  }
}

// 输入框样式
.el-input {
  --el-input-bg-color: #{rgba(255, 255, 255, 0.05)};
  --el-input-border-color: #{rgba(255, 255, 255, 0.1)};
  --el-input-hover-border-color: #{$primary-color};
  --el-input-focus-border-color: #{$primary-color};
  --el-input-text-color: #{$text-color};
  --el-input-placeholder-color: #{rgba(255, 255, 255, 0.3)};
}

// 表格样式
.el-table {
  --el-table-bg-color: #{rgba(255, 255, 255, 0.02)};
  --el-table-tr-bg-color: #{rgba(255, 255, 255, 0.02)};
  --el-table-header-bg-color: #{rgba(255, 255, 255, 0.05)};
  --el-table-border-color: #{rgba(255, 255, 255, 0.1)};
  --el-table-text-color: #{$text-color};
  --el-table-header-text-color: #{$text-color};
}

// 下拉菜单样式
.el-dropdown-menu {
  --el-bg-color-overlay: #{$bg-color-dark};
  --el-text-color-regular: #{$text-color};
  --el-border-color-light: #{rgba(255, 255, 255, 0.1)};
}

// 弹窗样式
.el-dialog {
  --el-dialog-bg-color: #{$bg-color-dark};
  --el-text-color-primary: #{$text-color};
  --el-border-color: #{rgba(255, 255, 255, 0.1)};
}

// 表单样式
.el-form-item {
  --el-text-color-regular: #{$text-color};
}

// 分页样式
.el-pagination {
  --el-text-color-regular: #{$text-color};
  --el-pagination-hover-color: #{$primary-color};
}